<template>
    <div>
        <el-row type="flex"  justify="space-between" :gutter="20">
            <el-col :span="12">
                <div>
                    <el-card :body-style="{ padding: '0px' }" class="box-card">
                        <div style="padding:0;" slot="header" class="clearfix">
                            <span>商品数量</span>
                        </div>
                        <p>
                            累计添加数量：<em>{{products}}</em>
                        </p>
                        <p>
                            今日添加数量：<em>{{newProducts}}</em>
                        </p>
                        <router-link class="links" tag="span" to="/prolist">查看详情</router-link>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="12">
                <div>
                    <el-card :body-style="{ padding: '0px' }" class="box-card">
                        <div style="padding:0;" slot="header" class="clearfix">
                            <span>商品种类数量</span>
                        </div>
                        <p>
                            累计添加数量：<em>{{categories}}</em>
                        </p>
                        <p>
                            今日添加数量：<em>{{newCategories}}</em>
                        </p>
                        <router-link class="links" tag="span" to="/prolist">查看详情</router-link>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="12">
                <div>
                    <el-card :body-style="{ padding: '0px' }" class="box-card">
                        <div style="padding:0;" slot="header" class="clearfix">
                            <span>用户数量</span>
                        </div>
                        <p>
                            累计添加数量：<em>{{users}}</em>
                        </p>
                        <p>
                            今日添加数量：<em>{{newUsers}}</em>
                        </p>
                        <router-link class="links" tag="span" to="/prolist">查看详情</router-link>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="12">
                <div>
                    <el-card :body-style="{ padding: '0px' }" class="box-card">
                        <div style="padding:0;" slot="header" class="clearfix">
                            <span>订单数量</span>
                        </div>
                        <p>
                            累计添加数量：<em>{{orders}}</em>
                        </p>
                        <p>
                            今日添加数量：<em>{{newOrders}}</em>
                        </p>
                        <router-link class="links" tag="span" to="/prolist">查看详情</router-link>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        
    </div>
</template>

<script>
import * as users from '@/api/getUsersInfo'
import * as products from '@/api/product'
import * as category from '@/api/category'
import * as orders from '@/api/order'
export default {
    name:'Home',
    data(){
        return{
            users:'',
            products:'',
            newUsers:'',
            newProducts:'',
            categories:'',
            newCategories:'',
            orders:'',
            newOrders:'',
            title:'首页'
        }
    },
    methods:{

    },
    mounted(){
        this.$emit('toparent',this.title)
        users.getUsersInfo({per:1000}).then(data=>{
            this.users = data.data.totalCount
            let time = 0
            data.data.users.map(v=>{
                v.createdAt = v.createdAt.slice(0,10)
                if(v.createdAt == '2019-11-07'){
                    console.log(1)
                    time++;
                }
            })
            console.log(time)
            this.newUsers = time
        })
        category.categoryList({per:1000}).then(data=>{
            this.categories = data.data.totalCount
            let time = 0
            data.data.categories.map(v=>{
                v.createdAt = v.createdAt.slice(0,10)
                if(v.createdAt == '2019-11-07'){
                    console.log(1)
                    time++;
                }
            })
            console.log(time)
            this.newCategories = time
        })
        orders.getOrders({per:1000}).then(data=>{
            let time = 0
            this.orders = data.data.totalCount
            data.data.orders.map(v=>{
                v.createdAt = v.createdAt.slice(0,10)
                if(v.createdAt == '2019-11-07'){
                    console.log(1)
                    time++;
                }
            })
            console.log(time)
            this.newOrders = time
        })
        products.getProlist({per:1000}).then(data=>{
            console.log(data.data)
            this.products = data.data.totalCount
            let time = 0;
            data.data.products.map(v=>{
                v.createdAt = v.createdAt.slice(0,10)
                if(v.createdAt == '2019-11-07'){
                    console.log(1)
                    time++;
                }
            })
            console.log(time)
            this.newProducts = time
        })
    }
}
</script>

<style scoped>
    h2{
        color:#fff;
    }
    .el-col{
        color:#333;
        min-height:80px;
        /* background:#fff; */
        width:24%;
        font-size:18px;
        padding:0;
    }
    .el-col .el-card{
        font-size:14px;
    }
    .el-card >>> .el-card__header{
        padding:0;
    }
    .el-card >>> .el-card__header span{
        line-height:24px;
        text-indent:2;
        color:rgb(255, 123, 0);
    }
    .el-col:nth-of-type(n+2) .el-card__header span{
        margin-left:15px;
    }
    .el-col:nth-of-type(n+2) .el-card p{
        margin-left:15px;
    }
    .el-card p {
        line-height: 24px;
    }
    .el-card p:nth-of-type(1){
        margin-top:20px;
    }
    .el-card em{
        font-style:normal;
        font-size:20px;
        color:orangered;
    }
    .links{
        float:right;
        margin:10px 10px 0 0;
        
    }
    .links:hover{
        color:orangered;
    }
    .el-row{
        margin-top:50px;
    }
</style>


